import React from 'react';
import './barrierGateDetail.scss';
import cookie from 'react-cookies';
import { Image, Tabs, Row, Col, Select, DatePicker, Table, Button, Input } from 'antd';
import { warningGateList, poundRoomAccessList } from '../../../api/dataCenter'
import Pagination from '../../../component/Pagination/Pagination.js';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { Column } = Table;

class barrierGateDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            project_id: this.props.location.search.split('?')[1],
            activeKey:'1',
            RangePickerVal:[],
            start_time:'',
            end_time: '',
            gateType: undefined,
            keyWord:'',
            pageSize: 10,
            total_count: 0,
            current: 1,
            dataSource : [],
            warningList:[]
        }
    }

    componentDidMount() {
        console.log(this.props)
        console.log('项目ID', this.props.location.search)
        const activeKey = sessionStorage.getItem('activeType')
        this.setState({
            activeKey
        },()=>{
            if (activeKey === '1') {
                this.getPoundRoomAccessList()
            } else {
                this.getWarningGateList()
            }
        })
    }
    componentDidUpdate(prevProps) {
        const { activeKey } = this.state;
        const { search } = this.props.location;
        console.log('项目ID--', prevProps.location.search, search)
        if (prevProps.location.search !== search) {
            this.setState({
                project_id: search.split('?')[1]
            }, () => {
                if (activeKey === '1') {
                    this.getPoundRoomAccessList()
                } else {
                    this.getWarningGateList()
                }
            })
        }
    }
    callback = (e) => {
        console.log(e)
        this.setState({
            current: 1,
            RangePickerVal: [],
            start_time: '',
            end_time: '',
            gateType: undefined,
            keyWord: '',
            activeKey:e
        },()=>{
            if (e === '1') {
                this.getPoundRoomAccessList()
            } else {
                this.getWarningGateList()
            }
        })
    }
    //开闸类型
    handleType = value => {
        console.log(value)
        this.setState({
            gateType: value
        })
    }
    //时间周期筛选
    onChangeDate = (val, valString) => {
        console.log(val, valString)
        const start_time = valString[0];
        const end_time = valString[1];
        this.setState({ RangePickerVal: val, start_time, end_time })
    }
    //条件搜索
    onChangeInput = (e) => {
        this.setState({
            keyWord: e.currentTarget.value
        })
    }
    //查询按钮
    search = () =>{
        const { activeKey } = this.state;
        console.log(activeKey)
        this.setState({
            current: 1
        },()=>{
            if (activeKey === '1') {
                this.getPoundRoomAccessList()
            } else {
                this.getWarningGateList()
            }
        })
    }
    //清空按钮
    clear = () =>{
        console.log('--')
        const { activeKey } = this.state;
        this.setState({
            RangePickerVal: [],
            start_time: '',
            end_time: '',
            gateType: undefined,
            keyWord: '',
        },()=>{
            if (activeKey === '1') {
                this.getPoundRoomAccessList()
            } else {
                this.getWarningGateList()
            }
        })
    }
    //开闸记录
    getPoundRoomAccessList = () => {
        const { project_id, start_time, end_time, gateType, keyWord, current } = this.state;
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            'project_id': project_id,
            'start_time': start_time,
            'end_time': end_time,
            'type': gateType,
            'search_text': keyWord,
            'page': current
        }
        console.log(post_data)
        poundRoomAccessList(post_data).then(res => {
            console.log(res)
            const total_list = [...res.data.data_list]
            const new_total_list = []
            total_list.forEach((item,i) => {
                new_total_list.push({
                    key: item.id+'-'+i,
                    type_name:'入口',
                    ...item
                })
                new_total_list.push({
                    key: item.id + '_' + i+'-'+1,
                    type_name: '出口',
                    ...item
                })
            })
            console.log(new_total_list)
            this.setState({
                total_count: res.data.total_count,
                dataSource: new_total_list
            })
        })
    }
    //校验失败记录
    getWarningGateList = () =>{
        const { project_id, start_time, end_time, gateType, keyWord, current } = this.state;
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            'project_id': project_id,
            'start_time': start_time,
            'end_time': end_time,
            'warning_type': gateType,
            'search_text': keyWord,
            'page': current
        }
        console.log(post_data)
        warningGateList(post_data).then(res => {
            console.log(res)
            this.setState({
                total_count: res.data.total_count,
                warningList: res.data.data_list
            })
        })
    }
    //分页获取数据
    setPaginationPage = pageNumber => {
        console.log('Page: ', pageNumber);
        const { activeKey } = this.state;
        console.log(activeKey)
        this.setState({
            current: pageNumber
        }, () => {
            if (activeKey === '1') {
                this.getPoundRoomAccessList()
            } else {
                this.getWarningGateList()
            }
        })
    }
    renderContent = (value, row, index, itemValue) => {
        const obj = {
            children: itemValue,
            props: {},
        };
        const { dataSource } = this.state;
        let num = 0;
        dataSource.forEach(item => {
            if (row.id === item.id) {
                num++
            }
        })
        if (index === 0) {
            obj.props.rowSpan = num;
        } else if (row.id !== dataSource[index - 1].id) {
            obj.props.rowSpan = num;
        } else {
            obj.props.rowSpan = 0;
        }
        return obj;
    }; 

    render() {
        const { activeKey, RangePickerVal, gateType, keyWord, dataSource, warningList, pageSize, total_count, current } = this.state;
        return (
            <div className="detailCon">
                <div className="detailbox">
                    <Tabs activeKey={activeKey} onChange={this.callback}>
                        <TabPane tab={<span className="tabTit">开关闸记录</span>} key="1">
                            <Row>
                                <Col xs={6} sm={8} md={8} lg={8} xl={8} span={12}>
                                    <span className="tit">开闸类型：</span>
                                    <Select value={gateType} size="small"  placeholder="全部" onChange={this.handleType.bind(this)} allowClear>
                                        <Option value="1">系统开闸</Option>
                                        <Option value="2">人工开闸</Option>
                                    </Select>
                                </Col>
                                <Col xs={12} sm={12} md={12} lg={14} xl={14} span={12}>
                                    <span className="tit">开闸时间：</span>
                                    <RangePicker onChange={this.onChangeDate} placeholder={['开始时间', '结束时间']} value={RangePickerVal} />
                                </Col>
                            </Row>
                            <Row>
                                <Col span={16}>
                                    <span className="tit">关键词：</span>
                                    <Input placeholder="可根据 车牌号/编号 进行搜索" value={keyWord} onChange={this.onChangeInput} />
                                </Col>
                                <Col span={8} className="bottom">
                                    <Button className="search" onClick={this.search}>查询</Button>
                                    <Button className="toClear" onClick={this.clear}>重置</Button>
                                </Col>
                            </Row>
                            <Row className="table">
                                <Col span={24}>
                                    <Table dataSource={dataSource} pagination={false} rowKey={record => record.key} scroll={{ x: '100%' }} locale={{ emptyText: '暂无数据' }}>
                                        <Column title="车辆牌号" render={(value, item, index) => this.renderContent(value, item, index, item.plate_number)} width='150px' key='1' />
                                        <Column title="白名单" render={(value, item, index) => this.renderContent(value, item, index, item.truck_number)} width='150px' key='2' />
                                        <Column title="白名单来源" render={(value, item, index) => this.renderContent(value, item, index, item.truck_type === 1 ? '本地排号' : '云排号')} width='150px' key='3' />
                                        <Column title="磅房名称" render={(value, item, index) => this.renderContent(value, item, index, `0${item.lane_num}号磅房`)} width='150px' key='4' />
                                        <Column title="出入类型" dataIndex="type_name" width='150px' key='5' />
                                        <Column title="开闸时间" render={item => item.type_name === '入口' ? item.enter_time || '--' : item.outlet_time || '--'} width='150px' key='6' />
                                        <Column title="开闸类型" render={item => item.type_name === '入口' ? 
                                            (()=>{
                                                if (item.enter_type === 1){
                                                    return '系统开闸'
                                                } else if (item.enter_type === 2) {
                                                    return '人工开闸-单次开闸'
                                                } else if (item.enter_type === 3) {
                                                    return '人工开闸-道闸常开'
                                                } else if (item.enter_type === 4) {
                                                    return '调用开闸失败'
                                                }else{
                                                    return '--'
                                                }
                                            })()
                                            : (() => {
                                                if (item.outlet_time === 1) {
                                                    return '系统开闸'
                                                } else if (item.outlet_time === 2) {
                                                    return '人工开闸-单次开闸'
                                                } else if (item.outlet_time === 3) {
                                                    return '人工开闸-道闸常开'
                                                } else if (item.outlet_time === 4) {
                                                    return '调用开闸失败'
                                                } else {
                                                    return '--'
                                                }
                                            })()} width='140px' key='7' />
                                        <Column title="开闸理由" render={item => item.type_name === '入口' ? 
                                            (()=>{
                                                if (item.enter_type === 1) {
                                                    return '校验通过'
                                                }else{
                                                    return item.opt_remark
                                                }
                                            })()
                                            : (() => {
                                                if (item.outlet_time === 1) {
                                                    return '校验通过'
                                                } else {
                                                    return item.opt_remark
                                                }
                                            })()} width='100px' key='8' />
                                        <Column title="过车影像" render={item => item.type_name === '入口' ? 
                                            <Image width={30} src={item.enter_img_url} /> :
                                            <Image width={30} src={item.outlet_img_url} />} width='150px' key='9' />
                                        <Column title="" width="0px" key="10" fixed="right" />
                                    </Table>
                        
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane tab="校验失败记录" key="2">
                            <Row>
                                <Col span={12}>
                                    <span className="tit">开闸类型：</span>
                                    <Select value={gateType} size="small" placeholder="全部" onChange={this.handleType.bind(this)}  allowClear>
                                        <Option value="1">开闸校验不通过</Option>
                                        <Option value="2">数据预警</Option>
                                        <Option value="3">系统预警</Option>
                                    </Select>
                                </Col>
                                <Col span={12}>
                                    <span className="tit">开闸时间：</span>
                                    <RangePicker onChange={this.onChangeDate} placeholder={['开始时间', '结束时间']} value={RangePickerVal} />
                                </Col>
                            </Row>
                            <Row>
                                <Col  span={16}>
                                    <span className="tit">关键词：</span>
                                    <Input placeholder="可根据 车牌号/白名单编号 进行搜索" value={keyWord} onChange={this.onChangeInput} />
                                </Col>
                                <Col span={8} className="bottom">
                                    <Button className="search" onClick={this.search}>查询</Button>
                                    <Button className="toClear" onClick={this.clear}>重置</Button>
                                </Col>
                            </Row>
                            <Row className="table">
                                <Col span={24}>
                                    <Table dataSource={warningList} pagination={false} rowKey={record => record.id} scroll={{ x: '100%' }} locale={{ emptyText: '暂无数据' }}>
                                        <Column title="车辆牌号" dataIndex="plate_number" width='150px' key='1' />
                                        <Column title="白名单" dataIndex="truck_number" width='150px' key='2' />
                                        <Column title="白名单来源" render={item => item.truck_type === 1 ? '本地排号' : '云排号'} width='150px' key='3' />
                                        <Column title="所属项目" dataIndex="project_name" width='150px' key='4' />
                                        <Column title="车道编号" render={item => `0${item.lane_num}号车道`} width='150px' key='5' />
                                        <Column title="出入口" render={item => item.lane_type === '1' ? '入口' : '出口'} width='150px' key='6' />
                                        <Column title="毛重" dataIndex="gross_weight" width='100px' key='7' />
                                        <Column title="皮重" dataIndex="tare_weight" width='100px' key='8' />
                                        <Column title="开闸失败原因" dataIndex="no_entry_reason" width='150px' key='9' />
                                        <Column title="备注" dataIndex="remark" width='150px' key='10' />
                                        <Column title="预警时间" dataIndex="add_time" width='150px' key='11' />
                                        <Column title="处理状态" render={item=>{
                                            (()=>{
                                                if (item.state === '1'){
                                                    return '预警中'
                                                } else if (item.state === '2'){
                                                    return '已处理'
                                                } else if (item.state === '3') {
                                                    return '已忽略'
                                                } else if (item.state === '9') {
                                                    return '已删除'
                                                }
                                            })()
                                        }} width='150px' key='11' />
                                        <Column title="" width="0px" key="12" fixed="right" />
                                    </Table>
                        
                                </Col>
                            </Row>
                        </TabPane>
                    </Tabs>
                </div>
                <Pagination pageSize={pageSize} total={total_count} current={current} getChangeData={this.setPaginationPage.bind(this)} />
            </div>
        )
    }
}

export default barrierGateDetail;